import { useState, useEffect, useRef } from 'react';
import { motion, useScroll, useTransform, AnimatePresence } from 'framer-motion';
import { 
  Brain, 
  Code, 
  BookOpen, 
  MessageSquare, 
  ChevronRight, 
  Menu, 
  X, 
  Github, 
  Linkedin, 
  Twitter, 
  Mail,
  ArrowRight,
  Sparkles,
  Globe,
  Database
} from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { toast } from 'sonner';
import { useTheme } from '@/hooks/useTheme';
import { cn } from '@/lib/utils';

// AI Growth mock data for chart
const aiGrowthData = [
  { year: '2020', growth: 30 },
  { year: '2021', growth: 45 },
  { year: '2022', growth: 65 },
  { year: '2023', growth: 85 },
  { year: '2024', growth: 120 },
  { year: '2025', growth: 180 },
];

// Services data
const services = [
  {
    id: 1,
    title: 'AI 培训',
    description: '专业的AI技术培训，帮助个人和企业快速掌握人工智能核心技能，抓住技术革命机遇。',
    icon: <BookOpen className="h-10 w-10 mb-4 text-blue-400" />,
    features: ['AI基础理论', '模型训练', '实践项目', '行业应用案例']
  },
  {
    id: 2,
    title: 'AI 产品开发',
    description: '定制化AI产品开发服务，从需求分析到落地部署，打造符合您业务需求的智能解决方案。',
    icon: <Brain className="h-10 w-10 mb-4 text-blue-400" />,
    features: ['需求分析', '算法设计', '模型开发', '部署优化']
  },
  {
    id: 3,
    title: '网站开发',
    description: '结合AI技术的现代网站开发，提供响应式设计、交互体验优化和智能功能集成。',
    icon: <Code className="h-10 w-10 mb-4 text-blue-400" />,
    features: ['前端开发', '后端集成', 'AI功能嵌入', '性能优化']
  }
];

// Projects data
const projects = [
  {
    id: 1,
    title: '智能客服系统',
    description: '基于大语言模型的智能客服系统，提升客户服务效率90%',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=AI%20chatbot%20interface%20modern%20design%20with%20data%20visualization&sign=6aa70a0a0834347e22c0327ed69cbae0'
  },
  {
    id: 2,
    title: 'AI内容生成平台',
    description: '自动化内容创作平台，支持多语言、多格式内容生成',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Content%20creation%20platform%20dashboard%20with%20AI%20assistance&sign=594552f9d54099321e8d8f0677d77b1d'
  },
  {
    id: 3,
    title: '数据分析可视化工具',
    description: '智能数据分析与可视化解决方案，让数据洞察更简单',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Data%20analytics%20dashboard%20with%20interactive%20charts%20and%20AI%20insights&sign=59fc31e5fe450ba75c0f41cdae2a382a'
  }
];

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const { theme, toggleTheme, isDark } = useTheme();
  
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-lg bg-opacity-90 dark:bg-opacity-90 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <div className="flex items-center space-x-2">
          <Brain className="h-8 w-8 text-blue-600 dark:text-blue-400" />
          <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent">AI先锋</span>
        </div>
        
        {/* Desktop Menu */}
        <div className="hidden md:flex items-center space-x-8">
          <a href="#about" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">关于我</a>
          <a href="#services" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">服务</a>
          <a href="#projects" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">项目</a>
          <a href="#contact" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">联系我</a>
          <button 
            onClick={toggleTheme}
            className="p-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300"
          >
            {isDark ? '☀️' : '🌙'}
          </button>
        </div>
        
        {/* Mobile Menu Button */}
        <div className="md:hidden flex items-center">
          <button 
            onClick={toggleTheme}
            className="p-2 mr-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300"
          >
            {isDark ? '☀️' : '🌙'}
          </button>
          <button onClick={() => setIsOpen(!isOpen)} className="p-2">
            {isOpen ? <X className="h-6 w-6 text-gray-700 dark:text-gray-300" /> : <Menu className="h-6 w-6 text-gray-700 dark:text-gray-300" />}
          </button>
        </div>
      </div>
      
      {/* Mobile Menu */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800"
          >
            <div className="container mx-auto px-4 py-4 flex flex-col space-y-4">
              <a 
                href="#about" 
                className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 transition-colors"
                onClick={() => setIsOpen(false)}
              >
                关于我
              </a>
              <a 
                href="#services" 
                className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 transition-colors"
                onClick={() => setIsOpen(false)}
              >
                服务
              </a>
              <a 
                href="#projects" 
                className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 transition-colors"
                onClick={() => setIsOpen(false)}
              >
                项目
              </a>
              <a 
                href="#contact" 
                className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 transition-colors"
                onClick={() => setIsOpen(false)}
              >
                联系我
              </a>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};

const Hero = () => {
  const { scrollYProgress } = useScroll();
  const opacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.2], [1, 0.95]);
  
  return (
    <motion.section 
      style={{ opacity, scale }}
      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-black"
    >
      {/* Background particles */}
      <div className="absolute inset-0 overflow-hidden">
        {[...Array(20)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full bg-blue-400 dark:bg-blue-600 opacity-20"
            initial={{ 
              x: Math.random() * window.innerWidth, 
              y: Math.random() * window.innerHeight,
              scale: Math.random() * 0.5 + 0.5
            }}
            animate={{ 
              x: [null, Math.random() * window.innerWidth],
              y: [null, Math.random() * window.innerHeight],
              opacity: [0.2, 0.05, 0.2]
            }}
            transition={{ 
              duration: Math.random() * 20 + 20, 
              repeat: Infinity,
              repeatType: "reverse" 
            }}
            style={{ 
              width: `${Math.random() * 100 + 20}px`, 
              height: `${Math.random() * 100 + 20}px`
            }}
          />
        ))}
      </div>
      
      <div className="container mx-auto px-4 z-10">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="inline-block mb-6 px-4 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 font-medium text-sm"
          >
            <div className="flex items-center justify-center space-x-2">
              <Sparkles className="h-4 w-4" />
              <span>AI赋能未来</span>
            </div>
          </motion.div>
          
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 dark:from-blue-400 dark:via-purple-400 dark:to-indigo-400 bg-clip-text text-transparent"
          >
            用AI技术<br />
            <span className="relative">
              引领行业变革
              <motion.div 
                className="absolute -bottom-2 left-0 h-1 bg-blue-500 dark:bg-blue-400"
                initial={{ width: 0 }}
                animate={{ width: "100%" }}
                transition={{ duration: 1, delay: 1 }}
              />
            </span>
          </motion.h1>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-lg md:text-xl text-gray-700 dark:text-gray-300 mb-10 max-w-2xl mx-auto"
          >
            我是AI领域的专家，专注于AI培训、产品开发和网站构建，帮助您的业务抓住人工智能时代的机遇。
          </motion.p>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4"
          >
            <a 
              href="#services" 
              className="px-8 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors duration-300 flex items-center gap-2"
            >
              了解我的服务
              <ChevronRight className="h-5 w-5" />
            </a>
            <a 
              href="#contact" 
              className="px-8 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 font-medium transition-colors duration-300"
            >
              立即联系
            </a>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1, delay: 1 }}
            className="mt-20 flex justify-center"
          >
            <motion.div
              animate={{ y: [0, 10, 0] }}
              transition={{ duration: 2, repeat: Infinity }}
            >
              <ChevronRight className="h-8 w-8 text-gray-500 dark:text-gray-400 rotate-90" />
            </motion.div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

const About = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  
  const opacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0, 1, 1, 0]);
  const y = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [50, 0, 0, -50]);
  
  return (
    <motion.section 
      ref={ref}
      style={{ opacity, y }}
      className="py-20 bg-white dark:bg-gray-900"
      id="about"
    >
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2"
          >
            <div className="relative">
              <div className="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl blur-lg opacity-20 animate-pulse"></div>
              <div className="relative rounded-2xl overflow-hidden border-4 border-white dark:border-gray-800 shadow-xl">
                <img 
                  src="https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=AI%20expert%20working%20on%20laptop%20with%20futuristic%20interface%20and%20data%20visualization&sign=974da29b36c5b1b2a34620a35d38760e" 
                  alt="AI专家工作照" 
                  className="w-full h-auto object-cover"
                />
              </div>
            </div>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2"
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900 dark:text-white">
              <span className="text-blue-600 dark:text-blue-400">#</span> 关于我
            </h2>
            <p className="text-lg text-gray-700 dark:text-gray-300 mb-6">
              我是一名AI领域的专业人士，拥有多年的行业经验，专注于将人工智能技术转化为实际应用，帮助企业和个人在数字时代保持竞争力。
            </p>
            <p className="text-lg text-gray-700 dark:text-gray-300 mb-8">
              我的专业领域包括机器学习、自然语言处理、计算机视觉和AI产品开发。我不仅提供技术培训，还帮助企业开发定制化的AI解决方案，同时提供融合AI技术的现代网站开发服务。
            </p>
            
            <div className="grid grid-cols-2 gap-6 mb-8">
              <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
                <h3 className="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">50+</h3>
                <p className="text-gray-700 dark:text-gray-300">成功项目</p>
              </div>
              <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
                <h3 className="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">100+</h3>
                <p className="text-gray-700 dark:text-gray-300">培训学员</p>
              </div>
              <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
                <h3 className="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">8+</h3>
                <p className="text-gray-700 dark:text-gray-300">行业经验</p>
              </div>
              <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
                <h3 className="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">24/7</h3>
                <p className="text-gray-700 dark:text-gray-300">技术支持</p>
              </div>
            </div>
            
            <div className="flex items-center gap-4">
              <a 
                href="#contact" 
                className="px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors duration-300 flex items-center gap-2"
              >
                联系我
                <Mail className="h-5 w-5" />
              </a>
              <div className="flex items-center gap-3">
                <a href="#" className="p-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                  <Github className="h-5 w-5" />
                </a>
                <a href="#" className="p-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                  <Linkedin className="h-5 w-5" />
                </a>
                <a href="#" className="p-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                  <Twitter className="h-5 w-5" />
                </a>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

const Services = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  
  const opacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0, 1, 1, 0]);
  const y = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [50, 0, 0, -50]);
  
  return (
    <motion.section 
      ref={ref}
      style={{ opacity, y }}
      className="py-20 bg-gray-50 dark:bg-gray-800"
      id="services"
    >
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">
              我的<span className="text-blue-600 dark:text-blue-400">服务</span>
            </h2>
            <p className="text-lg text-gray-700 dark:text-gray-300">
              提供全方位的AI解决方案，帮助您的业务在人工智能时代脱颖而出。
            </p>
          </motion.div>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <motion.div
              key={service.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.2 }}
              viewport={{ once: true }}
              whileHover={{ y: -10 }}
              className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-200 dark:border-gray-800"
            >
              <div className="mb-6">{service.icon}</div>
              <h3 className="text-xl font-bold mb-3 text-gray-900 dark:text-white">{service.title}</h3>
              <p className="text-gray-700 dark:text-gray-300 mb-6">{service.description}</p>
              <ul className="mb-8 space-y-2">
                {service.features.map((feature, i) => (
                  <li key={i} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
                    <div className="h-1.5 w-1.5 rounded-full bg-blue-500 dark:bg-blue-400"></div>
                    {feature}
                  </li>
                ))}
              </ul>
              <a 
                href="#contact" 
                className="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
              >
                了解更多
                <ArrowRight className="h-4 w-4 ml-1" />
              </a>
            </motion.div>
          ))}
        </div>
        
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          viewport={{ once: true }}
          className="mt-20 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 rounded-2xl p-10 text-center text-white shadow-xl"
        >
          <h3 className="text-2xl font-bold mb-4">准备好开启AI之旅了吗？</h3>
          <p className="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
            无论您是想学习AI技术，还是想为您的业务添加智能化功能，我都能为您提供专业的支持和服务。
          </p>
          <a 
            href="#contact" 
            className="inline-block px-8 py-3 rounded-lg bg-white text-blue-600 font-medium hover:bg-gray-100 transition-colors duration-300"
          >
            立即咨询
          </a>
        </motion.div>
      </div>
    </motion.section>
  );
};

const Projects = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  
  const opacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0, 1, 1, 0]);
  const y = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [50, 0, 0, -50]);
  
  return (
    <motion.section 
      ref={ref}
      style={{ opacity, y }}
      className="py-20 bg-white dark:bg-gray-900"
      id="projects"
    >
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">
              精选<span className="text-blue-600 dark:text-blue-400">项目</span>
            </h2>
            <p className="text-lg text-gray-700 dark:text-gray-300">
              探索我开发的一些AI项目和解决方案，这些作品展示了如何利用人工智能技术创造价值。
            </p>
          </motion.div>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects.map((project, index) => (
            <motion.div
              key={project.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.2 }}
              viewport={{ once: true }}
              className="group bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-700"
            >
              <div className="relative overflow-hidden">
                <motion.img 
                  src={project.image} 
                  alt={project.title}
                  className="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105"
                  whileHover={{ scale: 1.05 }}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                  <div className="p-6">
                    <a 
                      href="#" 
                      className="inline-flex items-center text-white font-medium hover:text-blue-300 transition-colors"
                      onClick={(e) => {
                        e.preventDefault();
                        toast('项目详情即将上线');
                      }}
                    >
                      查看详情
                      <ArrowRight className="h-4 w-4 ml-1" />
                    </a>
                  </div>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">{project.title}</h3>
                <p className="text-gray-700 dark:text-gray-300">{project.description}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </motion.section>
  );
};

const AITrend = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  
  const opacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0, 1, 1, 0]);
  const y = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [50, 0, 0, -50]);
  
  return (
    <motion.section 
      ref={ref}
      style={{ opacity, y }}
      className="py-20 bg-gray-50 dark:bg-gray-800"
    >
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2"
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900 dark:text-white">
              搭上<span className="text-blue-600 dark:text-blue-400">AI风口</span>
            </h2>
            <p className="text-lg text-gray-700 dark:text-gray-300 mb-6">
              人工智能正在以前所未有的速度改变我们的世界。从自动化到数据分析，从客户服务到产品创新，AI技术正在各个行业创造新的机遇。
            </p>
            <p className="text-lg text-gray-700 dark:text-gray-300 mb-8">
              不要错过这个革命性的技术浪潮。与我合作，您可以快速掌握AI技术，或者为您的业务集成最先进的人工智能解决方案，在竞争中保持领先地位。
            </p>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
              <div className="flex items-start gap-3">
                <div className="mt-1 p-2 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                  <Database className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-bold text-gray-900 dark:text-white">数据驱动决策</h3>
                  <p className="text-gray-700 dark:text-gray-300 text-sm">利用AI分析海量数据，获取有价值的业务洞察</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-1 p-2 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                  <Globe className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-bold text-gray-900 dark:text-white">增强用户体验</h3>
                  <p className="text-gray-700 dark:text-gray-300 text-sm">通过AI技术为用户提供个性化、智能化的服务体验</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-1 p-2 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                  <Code className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-bold text-gray-900 dark:text-white">自动化流程</h3>
                  <p className="text-gray-700 dark:text-gray-300 text-sm">自动化繁琐的业务流程，提高效率并降低成本</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-1 p-2 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                  <Sparkles className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-bold text-gray-900 dark:text-white">创新产品开发</h3>
                  <p className="text-gray-700 dark:text-gray-300 text-sm">利用AI技术开发创新产品和服务，开拓新市场</p>
                </div>
              </div>
            </div>
            
            <a 
              href="#contact" 
              className="inline-block px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors duration-300 flex items-center gap-2"
            >
              抓住AI机遇
              <ArrowRight className="h-5 w-5" />
            </a>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2 bg-white dark:bg-gray-900 p-6 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700"
          >
            <h3 className="text-xl font-bold mb-6 text-gray-900 dark:text-white">AI行业增长趋势</h3>
            <div className="h-72">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={aiGrowthData}>
                  <XAxis dataKey="year" stroke="#94a3b8" />
                  <YAxis stroke="#94a3b8" />
                  <Tooltip 
                    contentStyle={{ 
                      backgroundColor: '#f8fafc', 
                      border: '1px solid #e2e8f0',
                      borderRadius: '0.5rem' 
                    }} 
                  />
                  <Line 
                    type="monotone" 
                    dataKey="growth" 
                    name="增长率" 
                    stroke="#3b82f6" 
                    strokeWidth={3} 
                    dot={{ stroke: '#3b82f6', strokeWidth: 2, r: 4, fill: 'white' }}
                    activeDot={{ stroke: '#3b82f6', strokeWidth: 2, r: 6, fill: '#3b82f6' }}
                  />
                </LineChart>
              </ResponsiveContainer>
            </div>
            <p className="text-gray-700 dark:text-gray-300 mt-4 text-sm italic text-center">
              数据显示AI行业正以指数级速度增长，2025年市场规模预计将达到2020年的6倍
            </p>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

const Contact = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  
  const opacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0, 1, 1, 0]);
  const y = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [50, 0, 0, -50]);
  
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real application, you would send the form data to a server
    toast('感谢您的留言！我会尽快回复您。');
    setFormData({ name: '', email: '', message: '' });
  };
  
  return (
    <motion.section 
      ref={ref}
      style={{ opacity, y }}
      className="py-20 bg-white dark:bg-gray-900"
      id="contact"
    >
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">
              联系<span className="text-blue-600 dark:text-blue-400">我</span>
            </h2>
            <p className="text-lg text-gray-700 dark:text-gray-300">
              无论您有任何问题或需求，都可以通过以下方式与我联系，我会尽快回复您。
            </p>
          </motion.div>
        </div>
        
        <div className="flex flex-col lg:flex-row gap-12">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2"
          >
            <div className="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 h-full">
              <h3 className="text-xl font-bold mb-6 text-gray-900 dark:text-white">联系方式</h3>
              
              <div className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                    <Mail className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-500 dark:text-gray-400">邮箱</h4>
                    <p className="text-gray-900 dark:text-white">contact@aiexpert.com</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                    <Github className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-500 dark:text-gray-400">Github</h4>
                    <p className="text-gray-900 dark:text-white">github.com/aiexpert</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                    <Linkedin className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-500 dark:text-gray-400">LinkedIn</h4>
                    <p className="text-gray-900 dark:text-white">linkedin.com/in/aiexpert</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                    <Twitter className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-500 dark:text-gray-400">Twitter</h4>
                    <p className="text-gray-900 dark:text-white">@aiexpert</p>
                  </div>
                </div>
              </div>
              
              <div className="mt-12">
                <h3 className="text-xl font-bold mb-6 text-gray-900 dark:text-white">服务咨询</h3>
                <p className="text-gray-700 dark:text-gray-300 mb-4">
                  您对我的服务有任何疑问或需求，都可以填写右侧表单，我会在24小时内与您联系。
                </p>
                <p className="text-gray-700 dark:text-gray-300">
                  或者直接致电：+86 138 0000 0000
                </p>
              </div>
            </div>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2"
          >
            <div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-bold mb-6 text-gray-900 dark:text-white">发送消息</h3>
              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    您的姓名
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                    placeholder="请输入您的姓名"
                  />
                </div>
                
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    电子邮箱
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                    placeholder="请输入您的电子邮箱"
                  />
                </div>
                
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    您的留言
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    required
                    rows={5}
                    className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                    placeholder="请输入您的留言内容"
                  />
                </div>
                
                <button
                  type="submit"
                  className="w-full px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors duration-300 flex items-center justify-center gap-2"
                >
                  发送消息
                  <MessageSquare className="h-5 w-5" />
                </button>
              </form>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

const Footer = () => {
  return (
    <footer className="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-12">
      <div className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row justify-between items-center">
          <div className="flex items-center space-x-2 mb-6 md:mb-0">
            <Brain className="h-8 w-8 text-blue-600 dark:text-blue-400" />
            <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent">AI先锋</span>
          </div>
          
          <div className="flex flex-col md:flex-row items-center md:items-end space-y-4 md:space-y-0 md:space-x-8">
            <div className="flex items-center space-x-4">
              <a href="#" className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                <Github className="h-5 w-5" />
              </a>
              <a href="#" className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                <Linkedin className="h-5 w-5" />
              </a>
              <a href="#" className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                <Twitter className="h-5 w-5" />
              </a>
            </div>
            
            <div className="text-gray-600 dark:text-gray-400 text-sm">
              © {new Date().getFullYear()} AI先锋. 保留所有权利.
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default function Home() {
  const { theme } = useTheme();
  
  useEffect(() => {
    document.body.className = theme;
  }, [theme]);
  
  // Add smooth scrolling for anchor links
  useEffect(() => {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        if (targetId) {
          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            targetElement.scrollIntoView({
              behavior: 'smooth'
            });
          }
        }
      });
    });
    
    return () => {
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.removeEventListener('click', function(e) {
          e.preventDefault();
          const targetId = this.getAttribute('href');
          if (targetId) {
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
              targetElement.scrollIntoView({
                behavior: 'smooth'
              });
            }
          }
        });
      });
    };
  }, []);
  
  return (
    <div className={cn("min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white")}>
      <Navbar />
      <Hero />
      <About />
      <Services />
      <Projects />
      <AITrend />
      <Contact />
      <Footer />
    </div>
  );
}